<template>
  <div class="main" >
    <topHeader v-if="['home','newsList','resiger','successPage'].includes(routerName)" ></topHeader>
    <newHeader v-if="!['home','newsList','resiger','successPage'].includes(routerName)"></newHeader>
    <div :class="['router-view',{noHome:routerName!='home'},{isHome:routerName=='home'}]">
      <router-view></router-view>
      <bottomFooter v-if="['home'].includes(routerName)" ></bottomFooter>
    </div>
  </div>
</template>

<script>
import topHeader from "@/views/Main/module/topHeader";
import newHeader from "@/views/Main/module/newHeader";
import banner from "@/views/Main/module/banner";
import bottomFooter from "@/views/Main/module/bottomFooter";
export default {
  name: "Main",
  computed:{
    routerName(){
      return this.$route.name
    },
  },
  components:{
    topHeader,banner,bottomFooter,
    newHeader
  },
}
</script>

<style scoped>
.noHome{
  width: 100%;
  height: 100%; 
}
.isHome{
  height: calc(100% - 110px);
  overflow-y: auto;
}
.main{
  position: relative;
  width: 100%;
  height: 100%;
  overflow-y: hidden; 
}
</style>